<template>
  <Modal class="new-modal vertical-center-modal" v-model="visible" :closable="false" :transfer="false" fullscreen scrollable>
    <dull-modal slot="header" @close="exit" title="人员基本资料"></dull-modal>

    <el-tabs tab-position="left">
      <el-tab-pane label="基本资料">
        <div style="display: flex; justify-content: center;">
          <el-form ref="formOwn" style="width: 600px;" :model="userList" label-width="80px">
            <el-form-item label="头像">
              <img-upload :fileList="userList.images" :limit="0"></img-upload>
            </el-form-item>
            <el-form-item label="用户名称" prop="name">
              <el-input v-model="userList.name" disabled placeholder="请输入用户名称" />
            </el-form-item>
            <el-form-item label="用户工号" prop="code">
              <el-input v-model="userList.code" disabled placeholder="请输入用户工号"></el-input>
            </el-form-item>
            <el-form-item label="联系电话" prop="phoneNo">
              <el-input v-model="userList.phoneNo" disabled placeholder="请输入联系电话"></el-input>
            </el-form-item>
            <el-form-item label="邮箱地址" prop="email">
              <el-input v-model="userList.email" disabled placeholder="请输入邮箱地址"></el-input>
            </el-form-item>
            <el-form-item label="身份证" prop="identityCardNo">
              <el-input :value="$hidenNum(userList.identityCardNo, 4 , 3)" disabled placeholder="请输入身份证"></el-input>
            </el-form-item>
            <el-form-item label="组织机构" required>
              <el-input v-model="userList.parentName" disabled placeholder="请选择组织机构"></el-input>
            </el-form-item>
            <el-form-item label="角色" prop="roleIds">
              <el-select multiple disabled v-model="userList.roleIds" placeholder="请选择角色">
                <el-option v-for="item in roleList" :key="item.id" :label="item.name" :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="组织权限" required>
              <el-input v-model="userList.orgScopeName" disabled placeholder="请选择组织权限"></el-input>
            </el-form-item>
          </el-form>
        </div>
      </el-tab-pane>
      <el-tab-pane label="安全学习">

        <div class="top-search" style="margin-bottom: 0;">
          <el-form :model="queryParams" ref="queryForm" label-width="70px">
            <el-row :gutter="50">
              <el-col :span="6">
                <el-form-item label="标题" prop="title">
                  <el-input v-model="queryParams.title" placeholder="请输入标题" @keyup.enter.native="searchList" />
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="公开" prop="grade">
                  <el-select v-model="queryParams.isOpen" placeholder="请选择公开">
                    <el-option :value="1" label="是" />
                    <el-option :value="0" label="否" />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="公开" prop="grade">
                  <el-select v-model="queryParams.isOpen" placeholder="请选择公开">
                    <el-option :value="1" label="是" />
                    <el-option :value="0" label="否" />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item class="searchFromButton">
                  <but type="1" name="查询" @change="searchList" />
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
        <div class="box-content" style="margin-top: 0; padding-top: 0;">
          <table-key :tableCol="tableCol" @freeClick="getList">
          </table-key>
          <hu-table :tableData="tableData" :loading="loading" :tableCol="tableCol">
            <template v-slot:operate="{ row }">
            </template>
          </hu-table>
          <paging :total='total' :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination='getList'></paging>
        </div>
      </el-tab-pane>
      <el-tab-pane label="安全考试">安全考试</el-tab-pane>
      <el-tab-pane label="项目经历">项目经历</el-tab-pane>
    </el-tabs>
    <footer-modal slot="footer" :loading="loading" @close="exit" :submit="false">
    </footer-modal>
  </Modal>
</template>

<script>
export default {
  props: {
    userList: {
      type: Object,
      default: () => {},
    },
    roleList: {
      type: Array,
      default: () => [],
    },
    showDetails: {
      type: Boolean,
      default: () => false,
    },
  },
  watch: {
    showDetails(val) {
      this.visible = val;
    },
    visible(val) {
      this.$emit("update:showDetails", val);
    },
  },

  data() {
    return {
      visible: false,
      formData: {},
      rulesSon: {},
      loading: true, // 加载
      queryParams: {
        pageNum: 1,
        pageSize: 10,
      },
      total: 0, // table total
      // table Col
      tableCol: [
        {
          type: "selection",
          align: "center",
          width: "55",
          show: true,
        },
        {
          title: "序号",
          type: "index",
          align: "center",
          width: "55",
          show: true,
        },
        {
          title: "公告标题",
          key: "title",
          align: "center",
          show: true,
        },
        {
          title: "公告类型",
          key: "typeName",
          align: "center",
          show: true,
        },
        {
          title: "公告等级",
          key: "gradeName",
          align: "center",
          show: true,
        },
        {
          title: "公告内容",
          key: "content",
          align: "center",
          show: true,
        },
        {
          title: "发布人",
          key: "createUserName",
          align: "center",
          show: true,
        },
        {
          title: "发布单位",
          key: "companyName",
          align: "center",
          show: true,
        },
        {
          title: "发布时间",
          key: "createTime",
          align: "center",
          show: true,
        },
      ],
      tableData: [],
    };
  },
  methods: {
    exit() {
      this.visible = false;
    },
    // 列表 List
    getList() {
      this.loading = true;
      let params = {
        ...this.queryParams,
        type: this.queryParams.type && this.queryParams.type.join(","),
        grade: this.queryParams.grade && this.queryParams.grade.join(","),
      };
      http.getList(params).then(({ stateCode, result }) => {
        if (stateCode == 200) {
          this.loading = false;
          this.tableData = result.records;
          this.total = result.total;
        }
      });
    },
    // 查询 list
    searchList() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
  },
};
</script>
<style lang="scss" scoped>
::v-deep .el-tabs__item.is-left {
  width: 160px;
  text-align: left;
  height: 50px;
  line-height: 50px;
  &.is-active {
    background-color: #eef3fe !important;
  }
}
</style>
